<script>
import {getUser} from "../utils/utils";
import {getBabies} from "./babyView/api/babyutils";
export default {

  name: "UserIndex",
  data(){
    return{
      carousels:[],
      user:{},
      activeIndex: '1',
      babies:[],
      babyId: '0',
      dialogFormVisible:false,
      form:{
        name:'',
        petName:'',
        birthday:'',
        sex:'',
        relationship:'',
      },
      rules:{
        name:[
          { required: true, message: '请输入宝宝大名', trigger: 'blur' },
        ],
        petName:[
          { required: true, message: '请输入宝宝小名', trigger: 'blur' },
        ],
        birthday:[
          { required: true, message: '请选择宝宝生日', trigger: 'blur' },
        ],
        sex:[
          { required: true, message: '请输入宝宝性别', trigger: 'blur' },
        ],
        relationship:[
          { required: true, message: '请选择您与宝宝的关系', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    babyChange(babyId){
      this.babyId=babyId
      this.$refs.child.changeBaby(this.babyId)
    },
    addBaby(){
      this.dialogFormVisible=true
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose1(){
      this.dialogFormVisible=false
      this.form.name=''
      this.form.petName=''
      this.form.birthday=''
      this.form.sex=''
      this.form.relationship=''
    },
    addMyBaby(){
      this.$refs.addBabyForm.validate((valid) => {
        if (valid) {
          const fd = new FormData
          Object.keys(this.form).forEach(key=>{
            fd.append(key, this.form[key])
          })
          fd.append('userId',this.user.id)
          this.$axios.post('/baby/addBaby',fd).then(resp=>{
            alert(resp.data)
            this.handleClose1()
            this.getBabies(this.user.id)
          })
        } else {
          return false;
        }
      });
    },

  },
  created() {
    this.user=getUser()
    this.$axios.get('babyPic/getBabies?userId=' + this.user.id).then(resp=>{
      this.babies=resp.data
    })
    this.$axios.get('user/carousel').then(resp=>{
      this.carousels=resp.data
    })
  }
}
</script>

<template>
<div>
<!--跑马灯-->
  <template>
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="item in carousels" :key="item.id">
        <img class="carousel-image" :src="item.photopath" alt="carousels">
      </el-carousel-item>
      <!--<el-carousel-item>
        <img class="carousel-image" src="http://192.168.138.131:9000/picture/11.jpeg" alt="Image 1">
      </el-carousel-item>
      <el-carousel-item>
        <img class="carousel-image" src="http://192.168.138.131:9000/picture/诺埃尔_F4.png" alt="Image 2">
      </el-carousel-item>-->
    </el-carousel>
  </template>
<!--面包屑-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>
      <el-button type="text" @click="babyChange(0)" style="font-size: 17px">全部宝宝</el-button>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-for="baby in babies" :key="baby.id">
      <el-button @click="babyChange(baby.id)" type="text" style="font-size: 17px">{{baby.name}}</el-button>
    </el-breadcrumb-item>
    <el-breadcrumb-item>
      <el-button type="text" @click="addBaby" style="font-size: 17px">添加我的宝宝</el-button>
    </el-breadcrumb-item>
  </el-breadcrumb>
    <div class="userIndex_aside">
      <el-menu
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        style="width: 130px"
        router
      >
        <el-menu-item index="photo">
          <i class="el-icon-picture"></i>
          <span slot="title" >云相册</span>
        </el-menu-item>
        <el-menu-item index="growthRecord">
          <i class="el-icon-s-marketing"></i>
          <span slot="title" >成长记录</span>
        </el-menu-item>
        <el-menu-item index="vaccination">
          <i class="el-icon-s-management"></i>
          <span slot="title" >疫苗接种</span>
        </el-menu-item>
        <el-menu-item index="importantEvents">
          <i class="el-icon-collection-tag"></i>
          <span slot="title" >大事记</span>
        </el-menu-item>
        <el-menu-item index="relatives">
          <i class="el-icon-s-flag"></i>
          <span slot="title" >亲友团</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="userIndex_child_pic">
      <router-view ref="child"></router-view>
    </div>

  <el-dialog
    title="添加我的宝宝"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose1"
  >
    <el-form :model="form" :rules="rules" ref="addBabyForm">
      <el-form-item label="宝宝大名：" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="宝宝小名：" prop="petName">
        <el-input v-model="form.petName"></el-input>
      </el-form-item>
      <el-form-item label="您是宝宝的：">
        <el-select v-model="form.relationship" placeholder="请选择您与宝宝的关系" prop="relationship">
          <el-option label="父亲" value="父亲"></el-option>
          <el-option label="母亲" value="母亲"></el-option>
          <el-option label="爷爷" value="爷爷"></el-option>
          <el-option label="奶奶" value="奶奶"></el-option>
          <el-option label="姥姥" value="姥姥"></el-option>
          <el-option label="姥爷" value="姥爷"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="宝宝生日：" prop="birthday">
        <el-col :span="11">
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="宝宝性别：" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose1">取 消</el-button>
      <el-button type="primary" @click="addMyBaby">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.userIndex_aside{
  //border:2px solid blue;
  width: 130px;
  opacity:0.8
}
.userIndex_child_pic{
  //border: 2px solid red;
  position: relative;
  width: 89%;
  left: 140px;
  top:-270px;
}
.carousel-image {
  width: 100%; /* 设置图片宽度为轮播容器的宽度 */
  height: 100%; /* 设置图片高度为轮播容器的高度 */
  object-fit: cover; /* 保持图片比例并填充整个容器 */
}
</style>
